<!-- 
        做一个利用路由效果实现点击就能切换成我们想要的内容的效果
        设置导航区和展示区
        导航区要实现的效果是,点哪个就切换到相应的路由,
        展示区则是展现我们的路由内容
        
        第一步,在我们的router文件夹中配置我们的路由配置文件,使,我们的各个路由能够使用
        第二步,暴露我们的router的文件,并且在我们的main中去引用
        第三部,先编写我们的主组件,把我们的首页的最主要的内容给填充完毕,并在此,我们引用路由内容ing...........
        第四步,设置我们的内容区,并且将其路由内的内容显示出来.并且实现切换效果.
 -->
<template>
    <!-- 标题 -->
    <div class="app">
        <Header></Header>
        <!--  导航区-->
        <div class="navigate">
            <RouterLink :to="{ path: '/Home' }" active-class="active">首页</RouterLink>
            <RouterLink :to="{ path: '/News' }" active-class="active">新闻</RouterLink>
            <RouterLink :to="{ path: '/About' }" active-class="active">关于</RouterLink>
        </div>
    </div>
    <div class="main-content">
        <RouterView></RouterView>
    </div>
    
</template>
<script lang="ts" setup name="App">
import Header from './components/Header.vue';
import { RouterLink, RouterView } from 'vue-router';
</script>

<style>
div.navigate {
    font-size: 30px;
    display: flex;
    justify-content: space-evenly;
}

.navigate a {
    /* 取消超链接的默认行为 */
    text-decoration: none;
    /* 
    设置子元素让其出狱水平垂直居中的位置的操作方法
    */
    display: flex;
    justify-content: center;
    align-items: center;
    /* ----------------- */
    color: white;
    background-color: gray;
    border: 1px black solid;
    border-radius: 10px;
    height: 40px;
    width: 90px;
    font-size: 18px;
    letter-spacing: 5px;
}

/* 设置a元素中含有active的class的样式 */
.navigate a.active {
    background-color: #64967E;
    color: #ffc268;
    /*  设置字体的粗小ing.... */
    font-weight: 900;
    text-shadow: 0 0 1px black;

}

.main-content {
    margin: 0px auto;
    margin-top: 60px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
}
</style>


